为什么要学习源码，怎么学习？

本文作为Vue3源码系列的开篇词，以问答形式来诠释程序员为什么要学习源码

1. 为什么要学习源码

阅读优秀的代码的目的是让我们能够写出优秀的代码

写代码其实就跟我们写作文一样，你看的高分作文越多，写出高分作文的概率就越大

大部分程序员都只会写代码（改，抄，stackoverflow工程师，代名词: 搬砖），会阅读代码的很少，为什么呢？因为国内大部分的IT教育，网课，培训都没有教你怎么去看代码，只教你怎么去写代码

再者基于现在的程序员工作模式(模块化开发，只需要拿到需求做自己的部分)，别说看源码，甚至就连项目里的代码都懒的去看，我认识的很多程序员就是这样的，一个项目摸了两三年，你要问他项目中webpack都干了哪些事情，他的回答是不知道，反而趾高气扬的告诉你，那些他从来都用不上，看了也没什么用，也看不懂，这里省略内心千字脏文

阅读代码其实就咱们跟阅读一本小说一样，看过玄幻小说才能说出来修仙，看过都市的才能讲出来穿越

阅读主要目的是为了帮助我们积累素材，不要书到用时方恨少，看到美女我们应该能有一万种词语去形容，如气若幽兰，美艳不可方物，世间尤物，而不是简短的几个字，我艹，美女!

• 那么为什么非要看源码呢？

前面有提到优秀的高分作文看多了你才能写出来高分作文，你天天看着0分作文，那么写出来的大概率也自然是0分作文，什么样的作文算是高分呢？这个很好区分，前期从众就好

不给自己设限，不要让你周围人的技术上限成为你的上限

很多时候，人会潜意识给自己设限

井底之蛙是大家应该都熟悉的故事，大多数时候我们会给自己画一个圈，将同事的技术跟自己的技术做对比，或者将TL的技术跟自己做对比，经常有人向我吐槽说，同事的技术不如他为什么工资比他高，TL的技术也不怎么样，为什么能成为TL，现在给你的回答是，"因为你以为的并不是你以为的"

我们完全没有必要把时间花费在这种毫无意义的事情上面，改变不了环境就改变自己，学会破圈，为什么总有人说北上广深适合创业，因为北上广深的风水爆炸还是空气新鲜？显然都不是，在北上广深无非就是让你的人脉更优质一些，上限更高一点，你的圈有多大，未来的想象空间才有可能更大

• 你一直将自己跟同事对比，那么你同事的上限就是你的上限
• 你拿尤大跟自己对比，那么尤大的上限就是你的上限

功利性的阅读源码

功利性即指有目的性的，明确知道自己干完某一件事后能得到什么样的回报，所以首先你要知道你想得到什么？

看每一本书都有明确的目的，想学会理财，就得看理财相关的书，想学点技术，就得看点技术相关的书

看源码也是一样，你对vue.use之后发生了什么比较好奇，或者是你觉得现在面试都需要会看点源码，这都很好，至少你有明确的诉求

凡事只要有了功利属性，才更容易走的下去，否则就是真香警告

2.源码应该怎么阅读

单点突破

这种情况一般在是自己写需求遇到问题了，或者突然一时兴起想看看内脏的同学，可以直接粗暴的找到源码的仓库，直接在该仓库搜索关键字，然后根据模糊搜索的结果再结合自己的理解选择合适的结果，以下以Vue.use为例，如下图

我们可以看到第一个结果就是.spec (Standard Performance Evaluation Corporation，标准性能评估机构bai) 可以理解为代码的试金石，优秀开源代码的标配，直接代表着代码的稳健性

点进去我们看到的代码如下，从图中我们就能大致的猜到Vue.use的一些使用场景及边界值

image.png

从结果的第四个点进去，我们就能直接看到源码了，是不是很easy ?

系统阅读

即指以项目为维度的源码阅读，这种方式比上面的单点突破价值就要大很多，读完之后，不仅可以知道执行一个Api时具体发生了什么，更重要的是能学习到项目整体的设计思想和架构理念

当然，阅读难度也会有相应提高，这里给你四个建议

• 决心(事事把决心放第一)
• 对你所阅读的代码框架要有基本的了解(不然你读个啥)
• 设定一个计划并自我监督总结
• 循序渐进，任何事情需要一个过程，由易到难，由浅入深

具体方案

• 选择合适的工具让代码先跑起来
• 理清楚代码组织关系及用途
• 利用好单元测试
• 利弊权衡(该跳就跳，长期处于蒙的状态很容易走进死胡同，可以标记回头再看)
• 利用搜索引擎(可以结合网上的源码分析资料理解)
• 多跟自己交互(带问题阅读)

3.本地怎么调试源码

科普一下SourceMap这个东西吧，分开念Source Map，一句话理解就是一段维护了前后代码映射关系的json描述文件，具体故事可以泡杯茶慢慢讲了，这里不过多描述，感兴趣的自行查阅相关文档

有了sourcemap文件后，你想debugger还是console，就可以随意了

在vue3的example中的我们看到示例引用的都是dist文件

只需要将sourcemap配置开启，然后就能随意的debugger了

学习源码整体架构系列

最后

一般人都看不到文章末尾，看到这里你已经超越90%的人了。

1. 关注我的公众号若川视野，回复pdf领取前端优质书籍pdf
2. 我的博客地址：https://lxchuan12.cn 欢迎收藏
3. 觉得文章不错，可以点个在看呀^_^另外欢迎留言交流～

小提醒：若川视野公众号源码系列等文章合集在菜单栏中间【源码精选】按钮，欢迎点击阅读。